﻿
@{
    ViewData["Title"] = "StatisticTest";
}

<div class="cards photo-list">
    <div class="col-md-4 col-sm-6 col-lg-3">
        <div class="card" data-id="IMG0057" data-type="photo-album" data-owner="u0011">
            <img src="~/resources/img/img1.jpg" alt=""><div class="card-heading"><strong>日出东升(作者：张三)</strong></div>
            <div class="card-content text-muted">人在黄昏后</div>
            <div class="card-actions">
                <div class="row">
                    <button type="button" class="btn btn-danger btn-like"><i class="icon-heart"></i> 喜欢</button>
                    <button type="button" class="btn btn-success btn-unlike"><i class="icon-heart-empty"></i> 不喜欢</button>
                    <div class="pull-right text-danger like-count"><i class="icon-heart-empty"></i> <span class="num">0</span> 人喜欢</div>
                </div>
                <div class="row" style="margin-top:10px;">
                    <button type="button" class="btn btn-danger btn-likeit"><i class="icon-thumbs-o-up"></i> <span class="text">点赞</span></button>
                    <div class="pull-right text-danger likeit-count"><i class="icon-heart-empty"></i> <span class="num">0</span> 人点赞</div>
                </div>
                <div class="row" style="margin-top:10px;">
                    <div class="pull-right text-danger click-count"><i class="icon-hand-up"></i> <span class="num">0</span> 人点击</div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
        <div class="card" data-id="IMG0077" data-type="photo-album" data-owner="u0011">
            <img src="~/resources/img/img2.jpg" alt=""><div class="card-heading"><strong>高山流水(作者：张三)</strong></div>
            <div class="card-content text-muted">高山流水遇知音</div>
            <div class="card-actions">
                <div class="row">
                    <button type="button" class="btn btn-danger btn-like"><i class="icon-heart"></i> 喜欢</button>
                    <button type="button" class="btn btn-success btn-unlike"><i class="icon-heart-empty"></i> 不喜欢</button>
                    <div class="pull-right text-danger like-count"><i class="icon-heart-empty"></i> <span class="num">0</span> 人喜欢</div>
                </div>
                <div class="row" style="margin-top:10px;">
                    <button type="button" class="btn btn-danger btn-likeit"><i class="icon-thumbs-o-up"></i> <span class="text">点赞</span></button>
                    <div class="pull-right text-danger likeit-count"><i class="icon-heart-empty"></i> <span class="num">0</span> 人点赞</div>
                </div>
                <div class="row" style="margin-top:10px;">
                    <div class="pull-right text-danger click-count"><i class="icon-hand-up"></i> <span class="num">0</span> 人点击</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
        <div class="card" data-id="IMG0042" data-type="photo-album-n3" data-owner="u0013">
            <img src="~/resources/img/img3.jpg" alt=""><div class="card-heading"><strong>良辰美景(作者：李四)</strong></div>
            <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
            <div class="card-actions">
                <div class="row">
                    <button type="button" class="btn btn-danger btn-like"><i class="icon-heart"></i> 喜欢</button>
                    <button type="button" class="btn btn-success btn-unlike"><i class="icon-heart-empty"></i> 不喜欢</button>
                    <div class="pull-right text-danger like-count"><i class="icon-heart-empty"></i> <span class="num">0</span> 人喜欢</div>
                </div>
                <div class="row" style="margin-top:10px;">
                    <button type="button" class="btn btn-danger btn-likeit"><i class="icon-thumbs-o-up"></i><span class="text">点赞</span></button>
                    <div class="pull-right text-danger likeit-count"><i class="icon-heart-empty"></i> <span class="num">0</span> 人点赞</div>
                </div>
                <div class="row" style="margin-top:10px;">
                    <div class="pull-right text-danger click-count"><i class="icon-hand-up"></i> <span class="num">0</span> 人点击</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-3">
        <label>目标 id:</label>
        <input class="form-control target-id" type="text" placeholder="目标 id" readonly>
    </div>
    <div class="col-xs-3">
        <label>目标类型:</label>
        <input class="form-control target-type" type="text" placeholder="目标类型" readonly>
    </div>
    <div class="col-xs-3">
        <label>目标所属人:</label>
        <select class="form-control target-owner" readonly disabled>
            <option value="">未选择</option>
            <option value="u0011">张三</option>
            <option value="u0013">李四</option>
            <option value="u0035">李丹</option>
            <option value="u0047">赵阳</option>
        </select>
    </div>
    <div class="col-xs-3">
        <label>当前用户:</label>
        <select class="form-control current-user">
            <option value="u0011" selected>张三</option>
            <option value="u0013">李四</option>
            <option value="u0035">李丹</option>
            <option value="u0047">赵阳</option>
        </select>
    </div>
</div>
<div class="row" style="margin-top:10px;">
    <div class="col-xs-6 ">
        <div>当前用户动作统计信息:</div>
        <div class="s-list-1">

        </div>
    </div>
    <div class="col-xs-6">
        <div>当前用户所拥有对象被执行的统计信息:</div>
        <div class="s-list-2">

        </div>
    </div>
</div>
<div class="row" style="margin-top:10px;">
    <div class="col-md-6"><button class="btn btn-block btn-success btn-clock-in" type="button">打卡</button></div>
    <div class="col-md-6"><input type="text" class="form-control date-sign-in" placeholder="选择或者输入一个日期：yyyy-MM-dd"></div>
</div>
<div class="row" style="margin-top:10px;">
    <ul>
        <li>点击：循环：true ,互斥 ：false</li>
        <li>喜欢：循环：false ,互斥 ：true</li>
        <li>点赞：循环：true ,互斥 ：true</li>
        <li>签到：循环：false ,互斥 ：false</li>
    </ul>
</div>
@section Css{
    <link rel="stylesheet" href="~/lib/zui-1.9.2/dist/lib/datetimepicker/datetimepicker.css" asp-append-version="true" />
}

@section Scripts{
    <script src="~/lib/zui-1.9.2/dist/lib/datetimepicker/datetimepicker.js" asp-append-version="true"></script>
    <script src="~/js/test/ajax.js" asp-append-version="true"></script>
    <script>
        var codeMapping = {
            "like": "喜欢",
            "like_it": "点赞",
            "click": "点击",
            "sign_in": "签到",

        }
        var refreshData = function () {
            var list = $(".photo-list .card");
            var userId = $(".current-user").select().val();
            list.each((i, dom) => {
                var targetId = $(dom).data("id");
                var targetType = $(dom).data("type");
                ajax.getTargetStatisticInfo(targetId, targetType, userId)
                    .done(function (reqResult) {
                        var $dom = $(dom);
                        var list = reqResult;
                        for (var i = 0; i < list.length; i++) {
                            var info = list[i];
                            if (info.actionCode === "click") {
                                $(dom).find(".click-count .num").text(info.actionCount);
                            }
                            if (info.actionCode === "like") {
                                $(dom).find(".like-count .num").text(info.actionCount);
                                $dom.find(".btn-unlike").show();
                                $dom.find(".btn-like").show();
                                if (info.hasDoneAction) {
                                    if (info.isDonePositive) {
                                        $dom.find(".btn-unlike").hide();
                                    } else {
                                        $dom.find(".btn-like").hide();
                                    }
                                }
                            }
                            if (info.actionCode === "like_it") {
                                $dom.find(".btn-likeit").data("isDonePositive", info.isDonePositive);
                                $(dom).find(".likeit-count .num").text(info.actionCount);
                                if (info.isDonePositive) {
                                    $dom.find(".btn-likeit .text").text("已点赞");
                                } else {
                                    $dom.find(".btn-likeit .text").text("点赞");
                                }
                            }
                        }
                    })
            });
            ajax.getUserStatisticInfo(userId)
                .done(function (list) {
                    $(".s-list-1").children().remove();
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        $(".s-list-1").append(`<button class="btn btn-primary">${codeMapping[item.actionCode]}<span class="label label-badge">${item.actionCount}</span></button>`);
                    }
                })
                .fail(function (error) {
                    alert(error.responseJSON.message);
                });
            ajax.getTargetOwnerStatisticInfo(userId)
                .done(function (list) {
                    $(".s-list-2").children().remove();
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        $(".s-list-2").append(`<button class="btn btn-primary">${codeMapping[item.actionCode]}<span class="label label-badge">${item.actionCount}</span></button>`);
                    }
                })
                .fail(function (error) {
                    alert(error.responseJSON.message);
                })
        }

        $(".photo-list").on("click", ".card", function (e) {
            var ct = $(e.currentTarget);
            var targetId = ct.data("id");
            var targetType = ct.data("type");
            var targetOwner = ct.data("owner");
            var userId = $(".current-user").select().val();
            $(".target-id").val(targetId);
            $(".target-type").val(targetType);
            $(".target-owner").val(targetOwner);
            //添加点击记录
            ajax.addOperationRecord('00000000000000000000000000000002', '00000000000000000000000000000002', targetId, targetType, userId, targetOwner)
                .done(function () {
                    //ct.find(".click-count .num").text(parseInt(ct.find(".click-count .num").text()) + 1);
                    refreshData();
                }).fail(function (error) {
                    alert(error.responseJSON.message);
                });
        })
        $(".photo-list").on("click", ".card .btn-like", function (e) {
            e.stopPropagation();
            var ct = $(e.currentTarget).parents(".card");
            var targetId = ct.data("id");
            var targetType = ct.data("type");
            var targetOwner = ct.data("owner");
            var userId = $(".current-user").select().val();
            $(".target-id").val(targetId);
            $(".target-type").val(targetType);
            $(".target-owner").val(targetOwner);
            //添加喜欢记录
            ajax.addOperationRecord('00000000000000000000000000000008', '00000000000000000000000000000018', targetId, targetType, userId, targetOwner)
                .done(function () {
                    //ct.find(".like-count .num").text(parseInt(ct.find(".like-count .num").text()) + 1);
                    //ct.find(".btn-unlike").hide();
                    refreshData();
                }).fail(function (error) {
                    if (error.responseJSON.code === "AC005") {
                        alert("当前用户已经选择了喜欢");
                    } else {
                        alert(error.responseJSON.message);
                    }
                });
        });
        $(".photo-list").on("click", ".card .btn-unlike", function (e) {
            e.stopPropagation();
            var ct = $(e.currentTarget).parents(".card");
            var targetId = ct.data("id");
            var targetType = ct.data("type");
            var targetOwner = ct.data("owner");
            var userId = $(".current-user").select().val();
            $(".target-id").val(targetId);
            $(".target-type").val(targetType);
            $(".target-owner").val(targetOwner);
            //添加不喜欢记录
            ajax.addOperationRecord('00000000000000000000000000000008', '00000000000000000000000000000019', targetId, targetType, userId, targetOwner)
                .done(function () {
                    //var count = parseInt(ct.find(".like-count .num").text());
                    //if (count !== 0) {
                    //    count -= 1;
                    //}
                    //ct.find(".like-count .num").text(count);
                    //ct.find(".btn-like").hide();
                    refreshData();
                }).fail(function (error) {
                    if (error.responseJSON.code === "AC005") {
                        alert("当前用户已经选择了不喜欢");
                    } else {
                        alert(error.responseJSON.message);
                    }
                });
        });

        $(".photo-list").on("click", ".card .btn-likeit", function (e) {
            e.stopPropagation();
            var ct = $(e.currentTarget).parents(".card");
            var targetId = ct.data("id");
            var targetType = ct.data("type");
            var targetOwner = ct.data("owner");
            var isDonePositive = $(e.currentTarget).data("isDonePositive");
            var userId = $(".current-user").select().val();
            $(".target-id").val(targetId);
            $(".target-type").val(targetType);
            $(".target-owner").val(targetOwner);
            if (isDonePositive) {
                //添加取消点赞记录
                ajax.addOperationRecord('00000000000000000000000000000005', '00000000000000000000000000000008', targetId, targetType, userId, targetOwner)
                    .done(function (e) {
                        //ct.find(".likeit-count .num").text(parseInt(ct.find(".likeit-count .num").text()) - 1);
                        //ct.find(".btn-likeit .text").text("点赞");
                        //ct.find(".btn-likeit").data("isDonePositive", false);
                        refreshData();
                    }).fail(function (error) {
                        if (error.responseJSON.code === "AC005" || error.responseJSON.code === "AC004") {
                            alert("当前用户已经取消点赞");
                        } else {
                            alert(error.responseJSON.message);
                        }
                    });
            } else {
                //添加点赞记录
                ajax.addOperationRecord('00000000000000000000000000000005', '00000000000000000000000000000007', targetId, targetType, userId, targetOwner)
                    .done(function (e) {
                        //ct.find(".likeit-count .num").text(parseInt(ct.find(".likeit-count .num").text()) + 1);
                        //ct.find(".btn-likeit .text").text("已点赞");
                        //ct.find(".btn-likeit").data("isDonePositive", true);
                        refreshData();
                    }).fail(function (error) {
                        if (error.responseJSON.code === "AC005" || error.responseJSON.code === "AC004") {
                            alert("当前用户已经已点赞");
                        } else {
                            alert(error.responseJSON.message);
                        }
                    });
            }
        });
        $(".date-sign-in").datetimepicker(
            {
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            });
        var dateValue = "";
        $(".btn-clock-in").on("click", function (e) {
            var targetId = $(".date-sign-in").val();
            var targetType = "datetime.clock_in";
            var userId = $(".current-user").select().val();
            //添加打卡记录
            ajax.addOperationRecord('00000000000000000000000000000004', '00000000000000000000000000000003', targetId, targetType, userId)
                .done(function () {
                    refreshData();
                    alert("打卡成功");
                }).fail(function (error) {
                    if (error.responseJSON.code === "AC005") {
                        alert("当前用户在此日期已经打卡过");
                    } else {
                        alert(error.responseJSON.message);
                    }
                });
        })
        $(".current-user").on("change", function (e) {
            refreshData();
        });
        refreshData();
    </script>
}

